<template>
	<view :class="[themeClass,hasNav?'hasNav':'',hasTab?'hasTab':'']">
		<nav-box v-if='hasNav' />
		<slot></slot>
		<tab-box v-if='hasTab' />

		<u-toast ref="uToast1" />
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		toggleTheme
	} from '@/stores/themeStore.js';

	const themeClass = computed(() => toggleTheme())

	const props = defineProps({
		hasNav: {
			type: Boolean,
			default: false,
		},
		hasTab: {
			type: Boolean,
			default: false,
		},
	})


	const uToast1 = ref(null)
	const showMsg = (msg, type = 'error') => {
		let options = {
			title: msg,
			type: type,
		}
		uToast1.value.show(options)
	}

	defineExpose({
		showMsg
	});
</script>

<style>
</style>